/* 深色模式样式
------------------------------- */
[data-theme='dark'] {
    // 变量(自定义时，只需修改这里的值)
    --prev-bg-main: #1f1f1f;
    --prev-color-white: #ffffff;
    --prev-color-disabled: #191919;
    --prev-color-bar: #dadada;
    --prev-color-primary: #303030;
    --prev-border-color: #424242;
    --prev-border-black: #333333;
    --prev-border-columns: #2a2a2a;
    --prev-color-seting: #505050;
    --prev-text-color-regular: #9b9da1;
    --prev-text-color-placeholder: #7a7a7a;
    --prev-color-hover: #3c3c3c;
    --prev-color-hover-rgba: rgba(0, 0, 0, 0.3);

    // root
    --prev-bg-main-color: var(--prev-bg-main) !important;
    --prev-bg-topBar: var(--prev-color-disabled) !important;
    --prev-bg-topBarColor: var(--prev-color-bar) !important;
    --prev-bg-menuBar: var(--prev-color-disabled) !important;
    --prev-bg-menuBarColor: var(--prev-color-bar) !important;
    --prev-bg-menuBarActiveColor: var(--prev-color-hover-rgba) !important;
    --prev-bg-columnsMenuBar: var(--prev-color-disabled) !important;
    --prev-bg-columnsMenuBarColor: var(--prev-color-bar) !important;
    --prev-border-color-light: var(--prev-border-black) !important;
    --prev-color-primary-lighter: var(--prev-color-primary) !important;
    --prev-color-success-lighter: var(--prev-color-primary) !important;
    --prev-color-warning-lighter: var(--prev-color-primary) !important;
    --prev-color-danger-lighter: var(--prev-color-primary) !important;
    --prev-bg-color: var(--prev-color-primary) !important;
    --prev-color-dark-hover: var(--prev-color-hover) !important;
    --prev-color-menu-hover: var(--prev-color-hover-rgba) !important;
    --prev-color-user-hover: var(--prev-color-hover-rgba) !important;
    --prev-color-seting-main: var(--prev-color-seting) !important;
    --prev-color-seting-aside: var(--prev-color-hover) !important;
    --prev-color-seting-header: var(--prev-color-primary) !important;

    // element plus
    --el-color-white: var(--prev-color-disabled) !important;
    --el-text-color-primary: var(--prev-color-bar) !important;
    --el-border-color: var(--prev-border-black) !important;
    --el-border-color-light: var(--prev-border-black) !important;
    --el-border-color-lighter: var(--prev-border-black) !important;
    --el-border-color-extra-light: var(--el-color-primary-light-8) !important;
    --el-text-color-regular: var(--prev-text-color-regular) !important;
    --el-bg-color: var(--prev-color-disabled) !important;
    --el-color-primary-light-9: var(--prev-color-hover) !important;
    --el-text-color-disabled: var(--prev-text-color-placeholder) !important;
    --el-text-color-disabled-base: var(--el-color-primary) !important;
    --el-text-color-placeholder: var(--prev-text-color-placeholder) !important;
    --el-disabled-bg-color: var(--prev-color-disabled) !important;
    --el-fill-base: var(--prev-color-white) !important;
    --el-fill-colo: var(--prev-color-hover-rgba) !important;
    --el-fill-color: var(--prev-color-hover-rgba) !important;
    --el-fill-color-blank: var(--prev-color-disabled) !important;
    --el-fill-color-light: var(--prev-color-hover-rgba) !important;
    --el-bg-color-overlay: var(--el-color-primary-light-9) !important;
    --el-mask-color: rgb(42 42 42 / 80%);
    --el-fill-color-lighter: var(--prev-color-hover-rgba) !important;

    // button
    .el-button {
        &:hover {
            border-color: var(--prev-border-color) !important;
        }
    }
    .el-button--primary,
    .el-button--info,
    .el-button--danger,
    .el-button--success,
    .el-button--warning {
        --el-button-text-color: var(--prev-color-white) !important;
        --el-button-hover-text-color: var(--prev-color-white) !important;
        --el-button-disabled-text-color: var(--prev-color-white) !important;
        &:hover {
            border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important;
        }
    }

    // drawer
    .el-divider__text {
        background-color: var(--el-color-white) !important;
    }
    .el-drawer {
        border-left: 1px solid var(--prev-border-color-light) !important;
    }

    // tabs
    .el-tabs--border-card {
        background-color: var(--el-color-white) !important;
    }
    .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
        background: var(--prev-color-primary-lighter);
    }

    // alert / notice-bar
    .home-card-item {
        border: 1px solid var(--prev-border-color-light) !important;
    }
    .el-alert,
    .notice-bar {
        border: 1px solid var(--prev-border-color) !important;
        background-color: var(--prev-color-disabled) !important;
    }

    // topBar
    .layout-navbars-breadcrumb-index {
        background: none !important;
    }

    // menu
    .layout-aside {
        border-right: 1px solid var(--prev-border-color-light) !important;
        @extend .layout-navbars-breadcrumb-index;
    }

    // colorPicker
    .el-color-picker__mask {
        background: unset !important;
    }
    .el-color-picker__trigger {
        border: 1px solid var(--prev-border-color-light) !important;
    }

    // popper / dropdown
    .el-popper {
        border: 1px solid var(--prev-border-color) !important;
        color: var(--el-text-color-primary) !important;
        .el-popper__arrow:before {
            background: var(--el-color-white) !important;
            border: 1px solid var(--prev-border-color);
        }
        a {
            color: var(--el-text-color-primary) !important;
        }
    }
    .el-popper,
    .el-dropdown-menu {
        background: var(--el-color-white) !important;
    }
    .el-dropdown-menu__item:hover:not(.is-disabled) {
        background: var(--el-bg-color) !important;
    }
    .el-dropdown-menu__item.is-disabled {
        font-weight: 700 !important;
    }

    // input
    .el-input-group__append,
    .el-input-group__prepend {
        border: var(--el-input-border) !important;
        border-right: none !important;
        background: var(--prev-color-disabled) !important;
        border-left: 0 !important;
    }
    .el-input-number__decrease,
    .el-input-number__increase {
        background: var(--prev-color-disabled) !important;
    }

    // tag
    .el-select .el-select__tags .el-tag {
        background-color: var(--prev-bg-color) !important;
    }

    // pagination
    .el-pagination.is-background .el-pager li:not(.disabled).active {
        color: var(--prev-color-white) !important;
    }
    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .el-pager li {
        background-color: var(--prev-bg-color);
    }
    /*深色模式时分页高亮问题*/
    .el-pagination.is-background .btn-next.is-active,
    .el-pagination.is-background .btn-prev.is-active,
    .el-pagination.is-background .el-pager li.is-active {
        color: var(--prev-color-white) !important;
    }

    // radio
    .el-radio-button:not(.is-active) .el-radio-button__inner {
        border: 1px solid var(--prev-border-color-light) !important;
        border-left: 0 !important;
    }
    .el-radio-button.is-active .el-radio-button__inner {
        color: var(--prev-color-white) !important;
    }

    // countup
    .countup-card-item-flex {
        color: var(--el-text-color-primary) !important;
    }

    // editor
    .editor-container {
        .w-e-toolbar {
            background: var(--el-color-white) !important;
            border: 1px solid var(--prev-border-color-light) !important;
            .w-e-menu:hover {
                background: var(--prev-color-user-hover) !important;
                i {
                    color: var(--el-text-color-primary) !important;
                }
            }
        }
        .w-e-text-container {
            border: 1px solid var(--prev-border-color-light) !important;
            border-top: none !important;
            .w-e-text {
                background: var(--el-color-white) !important;
            }
        }
    }

    // date-picker
    .el-picker-panel {
        background: var(--el-color-white) !important;
    }

    // dialog
    .el-dialog {
        border: 1px solid var(--el-border-color-lighter);
        .el-dialog__header {
            color: var(--el-text-color-primary) !important;
        }
    }

    // columns
    .layout-columns-aside ul .layout-columns-active {
        color: var(--prev-color-white) !important;
    }
    .layout-columns-aside {
        border-right: 1px solid var(--prev-border-columns);
    }

    // tagsView
    .tags-style-one {
        .is-active {
            color: var(--el-text-color-primary) !important;
        }
        .layout-navbars-tagsview-ul-li:hover {
            border-color: var(--el-border-color-lighter) !important;
        }
    }

    // loading
    .el-loading-mask {
        background-color: var(--prev-bg-main) !important;
    }
}
